<template>
  <div id="app" class="app-container">
    <Header />
    <div class="main-container">
      <Layout>
        <div class="main"><router-view></router-view></div>
        <template #right>
          <div class="aside">
            <router-view name="aside"></router-view>
          </div>
        </template>
      </Layout>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import Layout from "@/components/Layout";
import Aside from "@/components/Aside";
export default {
  components: {
    Header,
    Layout,
    Aside,
  },
};
</script>

<style lang="less" scoped>
@import "~@/styles/common.less";
.app-container {
  background-color: #f7f8fa;
}
.main-container {
  width: 1150px;
  margin: 0 auto;
  padding: 10px;
  .main {
    width: 100%;
    height: 100%;
    background-color: #fff;
    margin-bottom: 10px;
  }
  .aside {
    width: 240px;
    height: 100%;
    margin-left: 20px;
  }
}
</style>
